import * as React from 'react';
import {Observable, of, range} from 'rxjs'
import { filter, map } from 'rxjs/operators';
import './Hello.css';

function Rxjs1() {
  let source$ = range(1, 2).pipe(filter(x => x % 2 === 1), map(x => x + x))
  source$.subscribe(x => console.log(x))
  setTimeout(() => {
    of(1, 2, 3).subscribe(console.log)
  }, 1000);

  // const onSub = (observer: any) => {
  //   observer.next(10)
  //   observer.next(20)
  //   observer.next(30)
  //   // 让这个函数永远不结束，无限写下去，那么来了数据就可以让观察者知道。
  //   // 不如做个循环
  // }

  // const onSub = (observer: any) => { 
  //   let number1: number = 1; 
  //   const handle = setInterval(() => { 
  //     observer.next(number1++); 
  //     if (number1 > 3) { 
  //       clearInterval(handle); 
  //     } 
  //   }, 1000); 
  // };

  // const onSub = (observer: any) => { 
  //   let number1: number = 1; 
  //   setInterval(() => { 
  //     observer.next(number1++); 
  //   }, 1000); 
  // };

  // const onSub = (observer: any) => { 
  //   let number1: number = 1; 
  //   const handle = setInterval(() => { 
  //     observer.next(number1++); 
  //     if (number1 > 3) { 
  //       clearInterval(handle); 
  //       observer.error('error')
  //       observer.complete() // 不执行，因为error和complete都是完结
  //     } 
  //   }, 1000); 
  // };

  // const onSub = (observer: any) => {
  //   let number1: number = 1; 
  //   const handle = setInterval(() => {
  //     observer.next(number1++); 
  //     // if (number1 > 3) {
  //     //   clearInterval(handle); 
  //     //   observer.error('error') 
  //     //   observer.complete() // 不执行，因为error和complete都是完结
  //     //   // 完结也会主动unsubscribe
  //     // } 
  //   }, 1000);
  //   return {
  //     unsubscribe: () => {
  //       console.log('unsubscribe')
  //       clearInterval(handle)
  //     }
  //   }

  // };

  const a = 'hello'
  const b = {}
  b[`${a}`] = 12
  
  const onSub = (observer: any) => {
    let number1: number = 1; 
    setInterval(() => {
      console.log('number1:',number1)
      observer.next(number1++); 
    }, 1000);
    return {
      unsubscribe: () => {
        console.log('unsubscribe') // 退订只是不想观察，使next等失效，然而数据依然在流转，除非完结
        // clearInterval(handle)
      }
    }
  };


  source$ = new Observable(onSub)
  const theOb = {
    complete: () => console.log('No More Data'),
    error: console.log,
    next: console.log
  }
  const subHandler = source$.subscribe(theOb)
  setTimeout(() => {
    subHandler.unsubscribe()
  }, 4000);
  return (
    <div className="hello">
      123
    </div>
  );
}

export default Rxjs1;

